/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-06-15 19:30:21
 * @LastEditors: lcz
 * @LastEditTime: 2022-09-08 16:16:21
 */
import { Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMemo, useEffect, useState } from 'react'
interface DataType {
  [k: string]: any
}
const getRowSpanCount = (data: any[], key: string | number, target: number | undefined) => {
  if (!Array.isArray(data)) return 1
  data = data.map(_ => _[key]) // 只取出筛选项
  let preValue = data[0]
  const res = [[preValue]] // 放进二维数组里
  let index = 0 // 二维数组下标
  for (let i = 1; i < data.length; i++) {
    if (data[i] === preValue) {
      // 相同放进二维数组
      res[index].push(data[i])
    } else {
      // 不相同二维数组下标后移
      index += 1
      res[index] = []
      res[index].push(data[i])
      preValue = data[i]
    }
  }
  const arr: number[] = []
  res.forEach(_ => {
    const len = _.length
    for (let i = 0; i < len; i++) {
      arr.push(i === 0 ? len : 0)
    }
  })
  //@ts-ignore
  return arr[target]
}
const mockData: DataType[] = [
  {
    csType: '工程技术',
    key: '1',
    name: '85/万吨每年',
    bumen: '炼化D车间',
    csType1: '工程技术',
    cs: '管控措施1',
    csType2: '加热',
    zzr: '王安',
    fxdy: '一段分析',
    gwfzr: '负责3',
    zq1: '1',
    zq2: '天',
    ps: '',
    children: [
      {
        csType: '工程技术',
        key: '1',
        name: '85/万吨每年',
        bumen: '炼化D车间',
        csType1: '工程技术',
        cs: '管控措施1',
        csType2: '加热',
        zzr: '王安',
        fxdy: '一段分析',
        gwfzr: '负责3',
        zq1: '1',
        zq2: '天',
        ps: '',
      },
    ],
  },
  {
    csType: '工程技术',
    key: '2',
    name: '85/万吨每年',
    bumen: '炼化D车间',
    csType1: '工程技术',
    cs: '管控措施2',
    csType2: '加热2',
    zzr: '王安',
    fxdy: '一段分析',
    gwfzr: '负责2',
    zq1: '8',
    zq2: '时',
    ps: '',
  },
  {
    csType: '工程技术',
    key: '3',
    name: '85/万吨每年',
    bumen: '炼化D车间',
    csType1: '工程技术',
    cs: '管控措施3',
    csType2: '加热3',
    zzr: '王安',
    fxdy: '一段分析',
    gwfzr: '负责1',
    zq1: '4',
    zq2: '时',
    ps: '',
  },
]
let columnsConfig = [
  {
    dataIndex: 'key',
    name: '序号',
  },
  {
    dataIndex: 'name',
    name: '生产装置',
  },
  {
    dataIndex: 'bumen',
    name: '责任部门',
  },
  {
    dataIndex: 'zzr',
    name: '责任人',
  },
  {
    dataIndex: 'fxdy',
    name: '分析单元',
  },
  {
    dataIndex: 'csType',
    name: '管控措施分类',
    colSpan: 3,
  },
  {
    dataIndex: 'csType1',
    name: '管控措施分类',
    colSpan: 0,
  },
  {
    dataIndex: 'csType2',
    name: '管控措施分类',
    colSpan: 0,
  },
  {
    dataIndex: 'cs',
    name: '管控措施',
  },
  {
    dataIndex: 'gwfzr',
    name: '岗位负责人',
  },
  {
    dataIndex: 'zq1',
    name: '周期',
    colSpan: 2,
  },
  {
    dataIndex: 'zq2',
    name: '周期',
    colSpan: 0,
  },
  {
    dataIndex: 'ps',
    name: '备注',
  },
]
export type selectionType = 'checkbox' | 'radio'

const GroupTable = () => {
  const [data, setData] = useState<DataType[]>([])

  const [selectionType] = useState<selectionType>('checkbox')

  const memoColums = useMemo(() => {
    let columns: ColumnsType<DataType> = []
    if (data.length > 0) {
      let fistArray = data[0]
      columns = Object.keys(fistArray).map(i => {
        let currentObj = columnsConfig.find(z => i === z.dataIndex)
        return {
          title: currentObj?.name,
          colSpan: currentObj?.colSpan,
          onCell: (_, index) => {
            let rowSpan = getRowSpanCount(data, i, index)
            return { rowSpan }
          },
          render: (_, record) => {
            let children = <div>{record[i]}</div>
            return {
              children,
            }
          },
        }
      })
    }
    return columns
  }, [data])
  //数据按照列的方式来排序
  useEffect(() => {
    let keyArray = columnsConfig.map(_ => _?.dataIndex)
    let newData: DataType[] = mockData.map(i => {
      let obj: DataType = {}
      keyArray.forEach(z => {
        let v = i[z]
        obj[z] = v
      })
      return obj
    })
    setData(newData)
  }, [])

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.key === '1', // Column configuration not to be checked
      name: record.key,
    }),
  }

  return (
    <div>
      <Table
        columns={memoColums}
        dataSource={data}
        bordered
        pagination={false}
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
      />
      ;
    </div>
  )
}
export default GroupTable
